<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>
</head>
<body>
    <div id="app">
        <h1>
            {{ bkl }}
        </h1>
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好，{{ name }}</h1>
        <h2></h2>
    </div>

    <hr>

    <div class="app">
        <h1>{{ bkl }}</h1>
        <input type="text" v-model="name" placeholder="你的名字">
        <h1>你好，{{ name }}</h1>
        <h2></h2>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        // 双向绑定映射点
        // 1. 模板，如{{name}}
        // 2. v-model的属性值
        // 3. 通过Vue的实例对象.的方式，可以寻到data方法里面的数据参数

        // 可以通过创建过个根实例，完成多个Vue的挂在
        let app = new Vue({
            el: '#app',
            data:()=>{
                return{
                    bkl:"My is Id 实例",
                    name: '林伟强'
                }
            }
        })
        let app2 = new Vue({
            el: '.app',
            data:()=>{
                return{
                    bkl:"我是class映射",
                    name: '不快乐'
                }
            }
        })
    </script>
</body>
</html>